<!-- 
    说明： 职位列表页面
 -->
<template>
  <section class="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="content-page">
      <div class="banner">
        <img
          class="banner-bg"
          src="@/assets/images/productManage/banner.png"
          alt=""
          srcset=""
        />
        <p class="banner-text">创意探索 勇敢突破</p>
      </div>
      <div class="main">
        <div class="nav-com">
          <el-breadcrumb
            separator-class="el-icon-arrow-right"
            style="margin-bottom: 20px"
          >
            <el-breadcrumb-item :to="{ name: 'home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ name: 'productManage' }">
              实践项目
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <span style="color: #3d6cb0">{{
                $route.meta.title || "--"
              }}</span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="search">
          <img
            src="@/assets/images/search-icon.png"
            alt=""
            class="search-icon"
          />
          <el-input
            placeholder="项目名称"
            v-model="qureyParams.title"
            style="width: 150px; margin-right: 10px"
          >
          </el-input>
          <el-select
            v-model="qureyParams.projectTypeId"
            style="width: 150px; margin-right: 10px"
            placeholder="项目类型"
            class="search-select"
            size="mini"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="qureyParams.entryStatus"
            style="width: 150px; margin-right: 10px"
            placeholder="报名状态"
            class="search-select"
            size="mini"
            clearable
          >
            <el-option
              v-for="item in productStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            style="width: 200px; margin-right: 10px"
            v-model="rangType"
            placeholder="请选择排序方式"
            clearable
          >
            <el-option label="发布时间由新到旧" value="desc"> </el-option>
            <el-option label="发布时间由旧到新" value="asc"> </el-option>
          </el-select>
          <el-button size="mini" type="primary" @click="init">搜索</el-button>
          <el-button
            size="mini"
            style="font-size: 15px; color: #3d6cb0"
            type="text"
            @click="clearCondition"
            >清空筛选条件</el-button
          >
        </div>
        <el-row :gutter="20">
          <el-col :span="12" v-for="(item, index) in productList" :key="index">
            <PcProductItem :key="index" :data="item"
          /></el-col>
        </el-row>
        <el-empty
          description="暂无相关职位"
          v-if="productList.length <= 0"
        ></el-empty>
        <!-- <JobCard :dataList="productList" v-if="productList.length > 0" /> -->
        <el-pagination
          class="bottom-page"
          background
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :page-sizes="[6, 12, 24, 36, 48]"
          @size-change="pagesizeHandle"
          @current-change="currentChange"
          :current-page="pageNo"
        >
        </el-pagination>
      </div>
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header/index.vue";
import PcProductItem from "./components/pcProductItem.vue";

import {
  getPraxisProjectTypeList,
  getPraxisProjectPage,
} from "../../request/api";

export default {
  // 组件名称
  name: "productList",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, PcProductItem },
  // 组件状态值
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      rangType: "",
      total: 0,
      productList: [],
      productStatus: [
        {
          label: "报名中",
          value: 1,
        },
        {
          label: "已结束",
          value: 2,
        },
      ],
      qureyParams: {
        title: "",
        projectTypeId: "",
        entryStatus: "", // 报名状态;1:报名中;2:报名结束
      },
      typeList: [],
      id: ''
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    $route: {
      handler() {
        setTimeout(() => {
          let keyword = this.$route.query.keyword;
          this.qureyParams.title = keyword;
          this.init();
        });
      },
      immediate: true,
    },
  },
  created() {
    this.getProductType();
    const {id} = this.$route.query
    this.id = id && Number(id) || ''
  },
  // 组件方法
  methods: {
    pagesizeHandle(val) {
      this.pageSize = Number(val);
      this.init();
    },
    currentChange(e) {
      this.pageNo = e;
      this.init();
    },
    getProductType() {
      getPraxisProjectTypeList().then((res) => {
        if (res && res.code === 0) {
          this.typeList = res.data.map((item) => ({
            label: item.name,
            value: Number(item.id),
          }));
          this.typeList.unshift({
            label: '全部',
            value: '',
          })
          this.qureyParams.projectTypeId = this.id || this.typeList[0].value;
        }
        this.init();
      });
    },
    clearCondition() {
      this.qureyParams = this.$options.data().qureyParams;
      this.rangType = "";
      this.qureyParams.projectTypeId = this.typeList[0].value;
      this.init();
    },
    init() {
      let params = Object.assign(
        {},
        {
          // entryStatus: "", // 可以不传
          title: this.qureyParams.title,
          projectTypeId: this.qureyParams.projectTypeId,
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          entryStatus: this.qureyParams.entryStatus,
          // sortField: {
          //   field: "t.weigth", // 默认按照t.weigth权重排序，不要改，除非修改时间顺序 t.release_time
          //   order: "desc",
          // },
        }
      );
      if (this.rangType !== "") {
        params.sortField = {
          field: "t.release_time", // 默认按照t.weigth权重排序，不要改，除非修改时间顺序 t.release_time
          order: this.rangType,
        };
      }
      for (const key in params) {
        if (key !== 'projectTypeId' && Object.hasOwnProperty.call(params, key) && params[key] === "") {
          delete params[key];
        }
      }
      getPraxisProjectPage(params).then((res) => {
        if (res && res.data && res.data.list && Array.isArray(res.data.list)) {
          this.productList = res.data.list;
          this.total = res.data.total;
        } else {
          this.productList = [];
          this.total = 0;
        }
      });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.page {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f5f8fa;

  .content-page {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 80px;
    overflow-y: auto;
    .banner {
      position: relative;
      width: 100%;
      height: 220px;
      .banner-bg {
        position: relative;
        width: 100%;
        height: 220px;
        object-fit: cover;
      }
      .banner-text {
        position: absolute;
        top: 50%;
        left: 0;
        width: 100%;
        text-align: center;
        transform: translate3d(0, -50%, 0);
        font-size: 38px;
        font-family: "PingFangSC-Light, PingFang SC";
        font-weight: 300;
        color: #ffffff;
        line-height: 53px;
      }
    }
    .search {
      display: flex;
      flex-flow: row wrap;
      align-items: center;
      margin-bottom: 20px;
      padding-left: 30px;
      position: relative;
      .search-icon {
        width: 18px;
        height: 20px;
        position: absolute;
        left: 0;
        top: 10px;
      }

      .search-select {
        width: 160px;
        margin-right: 13px;
      }
    }
    .main {
      background: #fff;
      width: 1200px;
      margin: 15px auto 0;
      padding: 23px 30px;
    }
    .bottom-page {
      margin-top: 20px;
      text-align: center;
    }
  }
}
// /deep/ .el-pagination.is-background .btn-next,
// /deep/ .el-pagination.is-background .btn-prev,
// /deep/ .el-pagination.is-background .el-pager li {
//   background: #fff !important;
//   border: 1px solid #ebebec;
//   border-radius: 4px;
// }

// /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
//   background-color: #409eff !important;
//   color: #fff;
// }
/deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-select-dropdown__item {
  font-size: 10px !important;
}
// @media screen and (max-width: 1500px) {
//   .content-page .main {
//     max-width: 1000px !important;
//   }
// }

#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}

.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  border: none;
  font-weight: 500;
}
.el-button--danger {
  background: #4677b9;
  border: none;
}
</style>
